<template>
    <div>
        <BackHeader :title="title"></BackHeader>
        <div class="mainbox">
            <!-- 头像 -->
            <div class="touxiang">
                <img @click="open(state.txshow)"
                    src="https://cdn7.axureshop.com/demo/1182587/images/%E7%BC%96%E8%BE%91%E8%B5%84%E6%96%99/oval_copy_6_u4557.png">
                <p>点击更换头像</p>
            </div>
            <!-- 信息编辑 -->
            <div class="info">
                <p>
                    <span>用户名</span>
                    <input type="text" v-model="user.name" placeholder="完善昵称">
                </p>
                <p>
                    <span>性别</span>
                    <input type="text" placeholder="女" v-model="user.sex" @click="open(state.sexshow)">
                </p>
                <p>
                    <span>生日</span>
                    <input type="text" v-model="user.birthday" placeholder="完善生日信息" @click="open(state.birshow)">
                </p>
                <p>
                    <span>个人简介</span>
                    <input type="text" v-model="user.introduction" placeholder="一句话简介">
                </p>
            </div>
        </div>
        <!-- 点击头像时弹出  -->
        <div class="change" v-show="state.txshow.zt">
            <div class="xiangji" @click="close(state.txshow)">
                <p>拍照</p>
                <p>从相册选择</p>
                <div></div>
                <p>取消</p>
            </div>
        </div>
        <!--点击性别时弹出  -->
        <div class="change" v-show="state.sexshow.zt">
            <div class="choosebox">
                <div class="choose">
                    <span @click="close(state.sexshow)">取消</span>
                    <span @click="close(state.sexshow)">完成</span>
                </div>
                <div class="sexbox">
                    <p>男</p>
                    <p>女</p>
                    <p>未知</p>
                </div>

            </div>
        </div>
        <!-- 点击生日时弹出 -->
        <div class="change" v-show="state.birshow.zt">
            <div class="choosebox">
                <div class="choose">
                    <span @click="close(state.birshow)">取消</span>
                    <span @click="close(state.birshow)">完成</span>
                </div>
                <ul class="datebox">
                    <li v-for="(item, index) in datelist " :key="index">
                        <span>{{ item.year }}</span>
                        <span>{{ item.mouth }}</span>
                        <span>{{ item.day}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import BackHeader from '@/components/mycomponents_jk/BackHeader.vue';
export default {
    name: 'BianJi',
    components: {
        BackHeader,
    },
    data() {
        return {
            title: "编辑资料",
            user: {
                name: "西瓜",
                sex: "",
                birthday: "",
                introduction: ""
            },
            state: {
                txshow: { zt: false },
                sexshow: { zt: false },
                birshow: { zt: false }
            },
            datelist: [
                {
                    year: "2023年",
                    mouth: "01月",
                    day: "01日"
                },
                {
                    year: "2022年",
                    mouth: "02月",
                    day: "02日"
                },
                {
                    year: "2021年",
                    mouth: "03月",
                    day: "03日"
                },
                {
                    year: "2020年",
                    mouth: "04月",
                    day: "04日"
                },
                {
                    year: "2019年",
                    mouth: "05月",
                    day: "05日"
                },
                {
                    year: "2018年",
                    mouth: "06月",
                    day: "06日"
                },
                {
                    year: "2017年",
                    mouth: "07月",
                    day: "07日"
                },
            ]
        };
    },

    mounted() {

    },

    methods: {
        open(res) {
            res.zt = true
        },
        close(res) {
            res.zt = false
        }
    },
};
</script>

<style lang="less" scoped>
.mainbox {
    width: 100%;
    margin-top: 5rem;
    padding: 2rem;

    .touxiang {
        text-align: center;
        font-size: 1.5rem;
        line-height: 2.4rem;

        img {
            width: 7.4rem;
            height: 7.4rem;
            border-radius: 50%;
        }
    }

    .info {
        margin-top: 3rem;

        p {
            line-height: 5rem;
            font-size: 1.5rem;
            border-bottom: 0.1rem solid rgb(227, 227, 227);

            span {
                display: inline-block;
                width: 7.5rem;
            }

            input {
                outline: none;
                border: none;
                font-size: 1.5rem;
            }

        }
    }
}

.change {
    width: 100%;
    height: 100%;
    background: rgba(50, 50, 50, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    animation: showchange ease 0.5s forwards;
    transform-origin: top;

    >div {
        width: 100%;
        position: absolute;
        bottom: 0;
        background-color: #fff;
        z-index: 99999;
        text-align: center;

    }

    .xiangji {
        font-size: 1.6rem;

        div {
            height: 0.5rem;
            width: 100%;
            background-color: rgba(50, 50, 50, 0.1);
        }

        p {
            line-height: 4.5rem;
        }

        p:first-child {
            border-bottom: 0.1rem solid rgba(50, 50, 50, 0.1);
        }
    }

    .choosebox {
        font-size: 1.4rem;

        .choose {
            background-color: rgba(242, 242, 242, 1);
            color: #006EF1;
            line-height: 4.8rem;
            display: flex;
            justify-content: space-between;
            padding: 0 2rem;
        }

        .sexbox {
            p {
                line-height: 4rem;
                color: #999999;
            }
        }

        .datebox {
            li {
                line-height: 4rem;
                font-size: 1.4rem;
                display: flex;

                span {
                    flex: 1;
                }
            }

            li:nth-of-type(4) {
                background-color: rgba(242, 242, 242, 1);
                border-color: rgba(204, 204, 204, 1);
                font-weight: bold;
                font-size: 1.6rem;
            }
        }

    }
}

@keyframes showchange {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}
</style>